const childPage = (title, introduction, imgPath, id) => {
    const str = `<li>
    <h2>${title}</h2>
    <div class="child-content">
        <div class="child-left">
            <p>${introduction}</p>
            <button class="btn btn-primary btn-lg view-sample"  data-title="${title}">View Sample</button>
            <button class="btn btn-secondary btn-lg" >Video Walkthrough</button>
        </div>
        <div class="child-right">
            <img src=${imgPath} alt="">
        </div>
    </div>
</li>`
    return str;
}

const grandChildPage=()=>{
    const str =` <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">..1.</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">222</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">.3..</div>`
}

const generatorChild = (subitems, dataTarget, id) => {
    let str = '';
    for (let obj of subitems) {
        str += childPage(obj.title, obj.introduction, obj.imgPath, id);
    }
    document.getElementById("childList").innerHTML = str;
    let h1ElementTemp = document.querySelector('#content>.title-content>h1');
    h1ElementTemp.innerHTML = dataTarget;
    h1ElementTemp.setAttribute('data-title',dataTarget);
}

export {
    generatorChild
};